<template>
  <view class="customer-manage-container">
    <z-paging ref="paging" v-model="customerList" @query="loadCustomerList">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar @confirm="search" v-model="searchKeyword" placeholder="搜索客户名称或编号" />
    </view>

    <!-- 客户卡片列表 -->
    <view class="customer-cards">
      <view class="customer-card" v-for="customer in customerList" :key="customer.companyId">
        <view class="card-content">
          <view class="info-item">
            <uni-icons type="shop" size="16"></uni-icons>
            <text class="info-label">公司名称：</text>
            <text class="info-value">{{customer.companyName}}</text>
          </view>
          <view class="info-item">
            <uni-icons type="person" size="16"></uni-icons>
            <text class="info-label">法人：</text>
            <text class="info-value">{{customer.companyLegalPerson}}</text>
          </view>
          <view class="info-item">
            <uni-icons type="staff" size="16"></uni-icons>
            <text class="info-label">总经理：</text>
            <text class="info-value">{{customer.companyManager}}</text>
          </view>
          <view class="info-item">
            <uni-icons type="contact" size="16"></uni-icons>
            <text class="info-label">对接人：</text>
            <text class="info-value">{{customer.companyPerson}}</text>
          </view>
          <view class="info-item">
            <uni-icons type="phone" size="16"></uni-icons>
            <text class="info-label">电话：</text>
            <text class="info-value">{{customer.companyPhone}}</text>
          </view>
          <view class="card-actions">
            <button class="detail-btn" size="mini" type="primary" @click="showCustomerDetail(customer)">
              <uni-icons type="info" size="14" color="#fff"></uni-icons>
              <text>详情</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="title">客户详情</text>
          <view class="close-btn" @click="closeDetail">×</view>
        </view>
        <scroll-view class="popup-content" scroll-y="true">
          <view class="detail-section">
            <view class="section-title">
              <uni-icons type="info" size="18" color="#409EFF"></uni-icons>
              <text>基本信息</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">公司名称：</text>
              <text class="detail-value">{{selectedCustomer.companyName}}</text>
            </view>
          </view>

          <view class="detail-section">
            <view class="section-title">
              <uni-icons type="staff" size="16" color="#2979ff"></uni-icons>
              <text>负责人信息</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">法人：</text>
              <text class="detail-value">{{selectedCustomer.companyLegalPerson}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">总经理：</text>
              <text class="detail-value">{{selectedCustomer.companyManager}}</text>
            </view>
          </view>

          <view class="detail-section">
            <view class="section-title">
              <uni-icons type="wallet" size="16" color="#2979ff"></uni-icons>
              <text>财务信息</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">税号：</text>
              <text class="detail-value">{{selectedCustomer.companyTaxNo}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">银行卡号：</text>
              <text class="detail-value">{{selectedCustomer.companyBankNo}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">开户行：</text>
              <text class="detail-value">{{selectedCustomer.companyBankAddress}}</text>
            </view>
          </view>

          <view class="detail-section">
            <view class="section-title">
              <uni-icons type="contact" size="16" color="#2979ff"></uni-icons>
              <text>联系信息</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">对接人：</text>
              <text class="detail-value">{{selectedCustomer.companyPerson}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">电话：</text>
              <text class="detail-value">{{selectedCustomer.companyPhone}}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    
    <!-- 添加悬浮按钮 -->
    <!-- <view class="add-button" @click="navigateToAdd">
      <image src="/static/images/icon/add.png" mode="aspectFit"></image>
    </view> -->
  </z-paging>
  </view>
</template>

<script>
import { listCompany } from "@/api/mes/company"
export default {
  data() {
    return {
      searchKeyword: '',
      customerList: [
      ],
      selectedCustomer: {}
    }
  },
  onLoad() {  // 修正生命周期钩子名称，从onload改为onLoad
    this.loadCustomerList(1, 10)  // 初始加载第一页数据
  },
  methods: {
    loadCustomerList(pageNo, pageSize) {  // 添加分页参数
      // 构建查询参数
      const params = {
        pageNum: pageNo,
        pageSize: pageSize,
        companyName: this.searchKeyword
      }
      
      // 调用API获取数据
      listCompany(params).then(response => {
        this.$refs.paging.completeByTotal(response.rows, response.total);
      }).catch(error => {
        console.error('获取客户列表失败', error);
        this.$refs.paging.complete(false);
        uni.showToast({
          title: '获取客户列表失败',
          icon: 'none'
        });
      });
    },
    
    search() {
      // 搜索时重新加载第一页
      this.$refs.paging.reload();
    },
    
    showCustomerDetail(customer) {
      this.selectedCustomer = customer
      this.$refs.detailPopup.open();

    },
    closeDetail() {
      this.$refs.detailPopup.close()
    },
    // 添加新方法
    // navigateToAdd() {
    //   uni.navigateTo({
    //     url: '/packageCustomer/pages/add'
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.customer-manage-container {
  padding: 20rpx;
  position: relative; // 添加相对定位
  min-height: 100vh; // 确保容器至少有视口高度

  .search-bar {
    margin-bottom: 20rpx;
  }

  .customer-cards {
    margin-bottom: 20rpx;

    .customer-card {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

      .card-content {
        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .uni-icons {
            margin-right: 10rpx;
            color: #666;
          }

          .info-label {
            font-size: 28rpx;
            color: #666;
            margin-right: 10rpx;
          }

          .info-value {
            font-size: 28rpx;
            color: #333;
          }
        }

        .card-actions {
          display: flex;
          justify-content: flex-end;
          margin-top: 16rpx;
          padding-top: 16rpx;
          border-top: 1px solid #eee;

          .detail-btn {
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            height: 56rpx;
            background-color: #2979ff;
            border: none;

            .uni-icons {
              margin-right: 4rpx;
            }

            text {
              color: #fff;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }

  .detail-popup {
    background-color: #fff;
    border-radius: 16rpx;
    width: 95%;  // 从90%增加到95%
    max-width: 750rpx;  // 从650rpx增加到750rpx
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx;  // 从30rpx增加到40rpx
      background-color: #f8f9fa;
      border-bottom: 1px solid #eaeaea;

      .title {
        font-size: 38rpx;  // 从34rpx增加到38rpx
        font-weight: 600;
        color: #333;
      }

      .close-btn {
        font-size: 44rpx;
        color: #666;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s;
        
        &:active {
          background-color: #e6e6e6;
        }
      }
    }

    .popup-content {
      max-height: 80vh;  // 从75vh增加到80vh
      padding: 40rpx;  // 从30rpx增加到40rpx

      .detail-section {
        margin-bottom: 40rpx;
        background-color: #f9f9f9;
        border-radius: 12rpx;
        padding: 30rpx;  // 从24rpx增加到30rpx

        .section-title {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;
          border-bottom: 1px solid #eee;
          padding-bottom: 16rpx;
          
          text {
            font-size: 30rpx;
            font-weight: 600;
            color: #333;
            margin-left: 10rpx;
          }
        }

        .detail-item {
          display: flex;
          margin-bottom: 20rpx;
          padding: 15rpx 0;  // 从10rpx增加到15rpx

          .detail-label {
            font-size: 30rpx;  // 从28rpx增加到30rpx
            color: #666;
            width: 200rpx;  // 从180rpx增加到200rpx
          }

          .detail-value {
            font-size: 30rpx;  // 从28rpx增加到30rpx
            color: #333;
            flex: 1;
            word-break: break-all;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
.customer-manage-container {
  padding: 20rpx;
  .add-button {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #2979ff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.4);
    z-index: 999;
    
    image {
      width: 60rpx;
      height: 60rpx;
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
}
</style>
